<template>
	<view class="page">

		<view class="nav_bar" style="background-color: rgba(255, 255, 255, 1);">
			<uni-nav-bar color="#333" left-icon="left" title="圈子管理" :border='false' :fixed="true"
				background-color="transparent" @clickLeft="$native.backAction()" @clickRight="onsubmit">

				<block slot="right">
					<view class="nav_right_btn flex_r_around">
						<text>保存</text>
					</view>
				</block>
			</uni-nav-bar>
		</view>

		<view class="nav_box"></view>

		<!-- 入圈 -->
		<view class="from_content">
			<u-collapse :border="false">
				<u-collapse-item title="入圈" :border="false" :clickable="false">
					<view class="content">
						<view class="item flex_r_between">
							<view class="label">加入圈子方式</view>
							<view class="right flex_center">
								<view class="select_box flex_center">
									<view class="select_item flex_center" @click="onJoinFree">
										<text>免费</text>
										<image :src="`/static/public/select${info.join_type == 1 ? '_s' : ''}.png`">
										</image>
									</view>
									<view class="select_item flex_center" @click="onJoinPay">
										<text>付费</text>
										<image :src="`/static/public/select${info.join_type == 3 ? '_s' : ''}.png`">
										</image>
									</view>
								</view>
							</view>
						</view>

						<view class="line"></view>

						<view class="item flex_r_between">
							<view class="label">入圈金额</view>
							<view class="right flex_center">
								<input type="number" placeholder="请输入" placeholder-class="input-placeholder"
									v-model="info.join_need_mony" />
								<view class="input_tag">元</view>
							</view>
						</view>

					</view>

					<view class="content">
						<view class="item flex_r_between" @click="onInviteActive">
							<view class="label">邀请活动(分享圈子加入)</view>
							<view class="right flex_center">
								<view class="select_image flex_center">
									<image :src="`/static/public/select${invite_active ? '_s' : ''}.png`"></image>
								</view>
							</view>
						</view>

						<view class="line"></view>

						<view class="item flex_r_between">
							<view class="label">免费入圈邀请 人数</view>
							<view class="right flex_center">
								<input type="number" placeholder="请输入" placeholder-class="input-placeholder"
									v-model="info.join_need_people" />
								<view class="input_tag">人</view>
							</view>
						</view>

					</view>

				</u-collapse-item>
			</u-collapse>
		</view>

		<!-- 动态 -->
		<view class="from_content" v-if="info.article_open == 1">
			<u-collapse :border="false">
				<u-collapse-item :title="info.article_tab_name" :border="false" :clickable="false">
					<view class="content">
						<view class="item flex_r_between">
							<view class="label">修改导航名称</view>
							<view class="right flex_center">
								<input type="text" placeholder="请输入" placeholder-class="input-placeholder"
									v-model="info.article_tab_name" maxlength='10' />
							</view>
						</view>
					</view>

					<view class="content" @click="onShowSort">
						<view class="item flex_r_between">
							<view class="label">导航排序</view>
							<view class="right flex_center">
								<view class="text flex_center">
									<u-icon name="arrow-right" bold size="28rpx" color="#999"></u-icon>
									<view>{{ info.article_sort }}</view>
								</view>
							</view>
						</view>
					</view>

					<view class="content">
						<view class="item flex_r_between">
							<view class="label">视频发布权限</view>
							<view class="right flex_center">
								<view class="select_box flex_center">
									<view class="select_item flex_center" @click="info.article_pub = 2">
										<text>仅自己</text>
										<image
											:src="`/static/public/select_circle${info.article_pub == 2 ? '_s' : ''}.png`">
										</image>
									</view>

									<view class="select_item flex_center" @click="info.article_pub = 1">
										<text>所有人</text>
										<image
											:src="`/static/public/select_circle${info.article_pub == 1 ? '_s' : ''}.png`">
										</image>
									</view>

									<view class="select_item flex_center" @click="info.article_pub = 3">
										<text>会员</text>
										<image
											:src="`/static/public/select_circle${info.article_pub == 3 ? '_s' : ''}.png`">
										</image>
									</view>
								</view>
							</view>
						</view>
					</view>

					<view class="content">
						<view class="item flex_r_between">
							<view class="label">用户查看视频是否付费</view>
							<view class="right flex_center">
								<view class="select_box flex_center">
									<view class="select_item flex_center" @click="info.article_watch_pay_open = 1">
										<text>是</text>
										<image
											:src="`/static/public/select_circle${info.article_watch_pay_open == 1 ? '_s' : ''}.png`">
										</image>
									</view>
									<view class="select_item flex_center" @click="info.article_watch_pay_open = 0">
										<text>否</text>
										<image
											:src="`/static/public/select_circle${info.article_watch_pay_open == 0 ? '_s' : ''}.png`">
										</image>
									</view>
								</view>
							</view>
						</view>

						<view class="line"></view>

						<view class="item flex_r_between">
							<view class="label">设置抽佣比例</view>
							<view class="right flex_center">
								<input type="number" placeholder="请输入" placeholder-class="input-placeholder"
									v-model="info.article_watch_commission" maxlength="2" />
								<view class="input_tag">%</view>
							</view>
						</view>

					</view>

				</u-collapse-item>
			</u-collapse>
		</view>

		<!-- 活动 -->
		<view class="from_content" v-if="info.active_open == 1">
			<u-collapse :border="false">
				<u-collapse-item :title="info.active_tab_name" :border="false" :clickable="false">
					<view class="content">
						<view class="item flex_r_between">
							<view class="label">修改导航名称</view>
							<view class="right flex_center">
								<input type="text" placeholder="请输入" placeholder-class="input-placeholder"
									v-model="info.active_tab_name" maxlength='10' />
							</view>
						</view>
					</view>

					<view class="content" @click="onShowSort">
						<view class="item flex_r_between">
							<view class="label">导航排序</view>
							<view class="right flex_center">
								<view class="text flex_center">
									<u-icon name="arrow-right" bold size="28rpx" color="#999"></u-icon>
									<view>{{ info.active_sort }}</view>
								</view>
							</view>
						</view>
					</view>

					<view class="content">
						<view class="tags">
							<view class="tags_title flex_r_between">
								<view class="block flex_center">
									添加二级导航(最多可添加5个)
								</view>

								<view class="length">
									{{ active_sub_tab_list.length }}/5
								</view>
							</view>
							<scroll-view scroll-x="true">
								<view class="tags_list flex_center">
									<view class="nothing flex_r_around" v-if="!active_sub_tab_list.length">
										<view class="flex_center">
											<u-icon name="tags" size="32rpx" color="#FD2A53"></u-icon>
											<text>暂无二级导航</text>
										</view>
									</view>
									<view class="tags_item flex_r_around" v-for="(item,index) in active_sub_tab_list"
										:key="index">
										<text>{{ item.name }}</text>
										<view class="tags_list_icon" @click="onDeteleNav(index , 1)">
											<u-icon name="close-circle-fill" color="#FD2A53" size="32rpx"></u-icon>
										</view>
									</view>
								</view>
							</scroll-view>

							<view class="tags_input flex_center" @click="show_tags_active = true">
								<view class="placeholder">{{ active_sub_tab_list.length > 0 ? '继续添加' : '请输入' }}</view>
								<!-- <text>/6</text> -->
							</view>

						</view>
					</view>

					<view class="content">
						<view class="item flex_r_between">
							<view class="label">活动发布权限</view>
							<view class="right flex_center">
								<view class="select_box flex_center">
									<view class="select_item flex_center" @click="info.active_pub = 2">
										<text>仅自己</text>
										<image
											:src="`/static/public/select_circle${info.active_pub == 2 ? '_s' : ''}.png`">
										</image>
									</view>

									<view class="select_item flex_center" @click="info.active_pub = 1">
										<text>所有人</text>
										<image
											:src="`/static/public/select_circle${info.active_pub == 1 ? '_s' : ''}.png`">
										</image>
									</view>

									<view class="select_item flex_center" @click="info.active_pub = 3">
										<text>会员</text>
										<image
											:src="`/static/public/select_circle${info.active_pub == 3 ? '_s' : ''}.png`">
										</image>
									</view>
								</view>
							</view>
						</view>
					</view>

					<view class="content">
						<view class="item flex_r_between">
							<view class="label">设置付费活动抽成比例</view>
							<view class="right flex_center">
								<input type="number" placeholder="请输入" placeholder-class="input-placeholder"
									v-model="info.active_apply_commission" maxlength="2" />
								<view class="input_tag">%</view>
							</view>
						</view>

					</view>

				</u-collapse-item>
			</u-collapse>
		</view>

		<!-- 群聊 -->
		<view class="from_content" v-if="info.group_open == 1">
			<u-collapse :border="false">
				<u-collapse-item :title="info.group_tab_name" :border="false" :clickable="false">
					<view class="content">
						<view class="item flex_r_between">
							<view class="label">修改导航名称</view>
							<view class="right flex_center">
								<input type="text" placeholder="请输入" placeholder-class="input-placeholder"
									v-model="info.group_tab_name" maxlength='10' />
							</view>
						</view>
					</view>

					<view class="content" @click="onShowSort">
						<view class="item flex_r_between">
							<view class="label">导航排序</view>
							<view class="right flex_center">
								<view class="text flex_center">
									<u-icon name="arrow-right" bold size="28rpx" color="#999"></u-icon>
									<view>{{ info.group_sort }}</view>
								</view>
							</view>
						</view>
					</view>
				</u-collapse-item>
			</u-collapse>
		</view>

		<!-- 商品 -->
		<view class="from_content" v-if="info.goods_open == 1">
			<u-collapse :border="false" :accordion="true">
				<u-collapse-item :title="info.goods_tab_name" :border="false" :clickable="false" ref="goods">
					<view class="content">
						<view class="item flex_r_between">
							<view class="label">修改导航名称</view>
							<view class="right flex_center">
								<input type="text" placeholder="请输入" placeholder-class="input-placeholder"
									v-model="info.goods_tab_name" maxlength='10' />
							</view>
						</view>
					</view>

					<view class="content" @click="onShowSort">
						<view class="item flex_r_between">
							<view class="label">导航排序</view>
							<view class="right flex_center">
								<view class="text flex_center">
									<u-icon name="arrow-right" bold size="28rpx" color="#999"></u-icon>
									<view>{{ info.goods_sort }}</view>
								</view>
							</view>
						</view>
					</view>

					<view class="content">
						<view class="item flex_r_between">
							<view class="label">商品权限</view>
							<view class="right flex_center">
								<view class="select_box flex_r_between">
									<view class="select_item flex_center" @click="onGoodsServiceType(2)">
										<text>指定人</text>
										<image
											:src="`/static/public/select_circle${info.goods_service_type == 2 ? '_s' : ''}.png`">
										</image>
									</view>
									<view class="select_item flex_center" @click="onGoodsServiceType(1)">
										<text>所有人</text>
										<image
											:src="`/static/public/select_circle${info.goods_service_type == 1 ? '_s' : ''}.png`">
										</image>
									</view>
									<text></text>
								</view>
							</view>
						</view>

						<!-- v-if="info.goods_service_type == 2" -->
						<view class="item flex_r_between">
							<view class="label">指定人列表</view>
							<view class="right flex_center" @click="toChooseStoreMember">
								<view class="people_list flex_center">
									<image :src="item.avatar" mode="aspectFill" v-for="(item,index) in storeMemberList"
										:key="index" v-if="index <= 5"></image>
									<text v-if="!storeMemberList.length">请选择</text>
								</view>
								<u-icon name="arrow-right" color="#999999" size="28rpx"></u-icon>
							</view>
						</view>

					</view>

					<view class="content">
						<view class="tags">
							<view class="tags_title flex_r_between">
								<view class="block flex_center">
									添加二级导航(最多可添加5个)
								</view>

								<view class="length">
									{{ goods_sub_tab_list.length }}/5
								</view>
							</view>
							<scroll-view scroll-x="true">
								<view class="tags_list flex_center">
									<view class="nothing flex_r_around" v-if="!goods_sub_tab_list.length">
										<view class="flex_center">
											<u-icon name="tags" size="32rpx" color="#FD2A53"></u-icon>
											<text>暂无二级导航</text>
										</view>
									</view>
									<view class="tags_item flex_r_around" v-for="(item,index) in goods_sub_tab_list"
										:key="index">
										<text>{{ item.name }}</text>
										<view class="tags_list_icon" @click="onDeteleNav(index , 5)">
											<u-icon name="close-circle-fill" color="#FD2A53" size="32rpx"></u-icon>
										</view>
									</view>
								</view>
							</scroll-view>

							<view class="tags_input flex_center" @click="show_tags_goods = true">
								<view class="placeholder">{{ goods_sub_tab_list.length > 0 ? '继续添加' : '请输入' }}</view>
								<!-- <text>/6</text> -->
							</view>

						</view>
					</view>

				</u-collapse-item>
			</u-collapse>
		</view>

		<!-- 商家 -->
		<view class="from_content" v-if="info.store_open == 1">
			<u-collapse :border="false" :accordion="true">
				<u-collapse-item :title="info.store_tab_name" :border="false" :clickable="false" ref="goods">
					<view class="content">
						<view class="item flex_r_between">
							<view class="label">修改导航名称</view>
							<view class="right flex_center">
								<input type="text" placeholder="请输入" placeholder-class="input-placeholder"
									v-model="info.store_tab_name" maxlength='10' />
							</view>
						</view>
					</view>
		
					<view class="content" @click="onShowSort">
						<view class="item flex_r_between">
							<view class="label">导航排序</view>
							<view class="right flex_center">
								<view class="text flex_center">
									<u-icon name="arrow-right" bold size="28rpx" color="#999"></u-icon>
									<view>{{ info.store_sort }}</view>
								</view>
							</view>
						</view>
					</view>
		
					<view class="content">
						<view class="tags">
							<view class="tags_title flex_r_between">
								<view class="block flex_center">
									添加二级导航(最多可添加5个)
								</view>
		
								<view class="length">
									{{ store_sub_tab_list.length }}/5
								</view>
							</view>
							<scroll-view scroll-x="true">
								<view class="tags_list flex_center">
									<view class="nothing flex_r_around" v-if="!store_sub_tab_list.length">
										<view class="flex_center">
											<u-icon name="tags" size="32rpx" color="#FD2A53"></u-icon>
											<text>暂无二级导航</text>
										</view>
									</view>
									<view class="tags_item flex_r_around" v-for="(item,index) in store_sub_tab_list"
										:key="index">
										<text>{{ item.name }}</text>
										<view class="tags_list_icon" @click="onDeteleNav(index , 5)">
											<u-icon name="close-circle-fill" color="#FD2A53" size="32rpx"></u-icon>
										</view>
									</view>
								</view>
							</scroll-view>
		
							<view class="tags_input flex_center" @click="show_tags_store = true">
								<view class="placeholder">{{ goods_sub_tab_list.length > 0 ? '继续添加' : '请输入' }}</view>
								<!-- <text>/6</text> -->
							</view>
		
						</view>
					</view>
		
				</u-collapse-item>
			</u-collapse>
		</view>

		<!-- 直播 -->
		<view class="from_content" v-if="info.live_open == 1">
			<u-collapse :border="false">
				<u-collapse-item :title="info.live_tab_name" :border="false" :clickable="false">
					<view class="content">
						<view class="item flex_r_between">
							<view class="label">修改导航名称</view>
							<view class="right flex_center">
								<input type="text" placeholder="请输入" placeholder-class="input-placeholder"
									v-model="info.live_tab_name" maxlength='10' />
							</view>
						</view>
					</view>

					<view class="content" @click="onShowSort">
						<view class="item flex_r_between">
							<view class="label">导航排序</view>
							<view class="right flex_center">
								<view class="text flex_center">
									<u-icon name="arrow-right" bold size="28rpx" color="#999"></u-icon>
									<view>{{ info.live_sort }}</view>
								</view>
							</view>
						</view>
					</view>

					<view class="content" v-if="info.live_type == 1">
						<view class="item flex_r_between">
							<view class="label">语音直播权限</view>
							<view class="right flex_center"></view>
						</view>

						<view class="item flex_r_between">
							<view class="right flex_center">
								<view class="select_box flex_r_between">
									<view class="select_item flex_center" @click="info.live_pub = 5">
										<text>指定人</text>
										<image
											:src="`/static/public/select_circle${info.live_pub == 5 ? '_s' : ''}.png`">
										</image>
									</view>

									<view class="select_item flex_center" @click="info.live_pub = 3">
										<text>会员</text>
										<image
											:src="`/static/public/select_circle${info.live_pub == 3 ? '_s' : ''}.png`">
										</image>
									</view>

									<view class="select_item flex_center" @click="info.live_pub = 1">
										<text>所有人</text>
										<image
											:src="`/static/public/select_circle${info.live_pub == 1 ? '_s' : ''}.png`">
										</image>
									</view>

									<view class="select_item flex_center" @click="info.live_pub = 2">
										<text>仅自己</text>
										<image
											:src="`/static/public/select_circle${info.live_pub == 2 ? '_s' : ''}.png`">
										</image>
									</view>
								</view>
							</view>
						</view>

						<view class="item flex_r_between" v-if="info.live_pub == 5">
							<view class="label">指定人列表</view>
							<view class="right flex_center" @click="toChooseLiveMember">
								<view class="people_list flex_center">
									<image :src="item.avatar" mode="aspectFill" v-for="(item,index) in liveMemberList"
										:key="index" v-if="index <= 5"></image>
									<text v-if="!liveMemberList.length">请选择</text>
								</view>
								<u-icon name="arrow-right" color="#999999" size="28rpx"></u-icon>
							</view>
						</view>

						<view class="line"></view>

						<view class="item flex_r_between">
							<view class="label">设置个播抽佣比例</view>
							<view class="right flex_center">
								<input type="number" placeholder="请输入" placeholder-class="input-placeholder"
									v-model="info.user_live_commission" maxlength="2" />
								<view class="input_tag">%</view>
							</view>
						</view>

					</view>
					
					<view class="content" v-if="info.live_type == 2">
						<view class="item flex_r_between">
							<view class="label">设置公会抽佣比例</view>
							<view class="right flex_center">
								<input type="number" placeholder="请输入" placeholder-class="input-placeholder"
									v-model="info.live_gift_commission" maxlength="2" />
								<view class="input_tag">%</view>
							</view>
						</view>
					</view>

				</u-collapse-item>
			</u-collapse>
		</view>

		<!-- 成员 -->
		<view class="from_content" v-if="info.member_open == 1">
			<u-collapse :border="false">
				<u-collapse-item :title="info.member_tab_name" :border="false" :clickable="false">
					<view class="content">
						<view class="item flex_r_between">
							<view class="label">修改导航名称</view>
							<view class="right flex_center">
								<input type="text" placeholder="请输入" placeholder-class="input-placeholder"
									v-model="info.member_tab_name" maxlength='10' />
							</view>
						</view>
					</view>

					<view class="content" @click="onShowSort">
						<view class="item flex_r_between">
							<view class="label">导航排序</view>
							<view class="right flex_center">
								<view class="text flex_center">
									<u-icon name="arrow-right" bold size="28rpx" color="#999"></u-icon>
									<view>{{ info.member_sort }}</view>
								</view>
							</view>
						</view>
					</view>
				</u-collapse-item>
			</u-collapse>
		</view>

		<!-- 名片 -->
		<view class="from_content" v-if="info.card_open == 1">
			<u-collapse :border="false">
				<u-collapse-item :title="info.card_tab_name" :border="false" :clickable="false">
					<view class="content">
						<view class="item flex_r_between">
							<view class="label">修改导航名称</view>
							<view class="right flex_center">
								<input type="text" placeholder="请输入" placeholder-class="input-placeholder"
									v-model="info.card_tab_name" maxlength='10' />
							</view>
						</view>
					</view>

					<view class="content" @click="onShowSort">
						<view class="item flex_r_between">
							<view class="label">导航排序</view>
							<view class="right flex_center">
								<view class="text flex_center">
									<u-icon name="arrow-right" bold size="28rpx" color="#999"></u-icon>
									<view>{{ info.card_sort }}</view>
								</view>
							</view>
						</view>
					</view>
				
					<view class="content">
						<view class="tags">
							<view class="tags_title flex_r_between">
								<view class="block flex_center">
									添加二级导航(最多可添加5个)
								</view>
					
								<view class="length">
									{{ card_sub_tab_list.length }}/5
								</view>
							</view>
							<scroll-view scroll-x="true">
								<view class="tags_list flex_center">
									<view class="nothing flex_r_around" v-if="!card_sub_tab_list.length">
										<view class="flex_center">
											<u-icon name="tags" size="32rpx" color="#FD2A53"></u-icon>
											<text>暂无二级导航</text>
										</view>
									</view>
									<view class="tags_item flex_r_around" v-for="(item,index) in card_sub_tab_list"
										:key="index">
										<text>{{ item.name }}</text>
										<view class="tags_list_icon" @click="onDeteleNav(index , 4)">
											<u-icon name="close-circle-fill" color="#FD2A53" size="32rpx"></u-icon>
										</view>
									</view>
								</view>
							</scroll-view>
					
							<view class="tags_input flex_center" @click="show_tags_card = true">
								<view class="placeholder">{{ card_sub_tab_list.length > 0 ? '继续添加' : '请输入' }}</view>
							</view>
					
						</view>
					</view>
				
				</u-collapse-item>
			</u-collapse>
		</view>

		<!-- 预约 -->
		<view class="from_content" v-if="info.appoint_open == 1">
			<u-collapse :border="false">
				<u-collapse-item :title="info.appoint_tab_name" :border="false" :clickable="false">
					<view class="content">
						<view class="item flex_r_between">
							<view class="label">修改导航名称</view>
							<view class="right flex_center">
								<input type="text" placeholder="请输入" placeholder-class="input-placeholder"
									v-model="info.appoint_tab_name" maxlength='10' />
							</view>
						</view>
					</view>

					<view class="content" @click="onShowSort">
						<view class="item flex_r_between">
							<view class="label">导航排序</view>
							<view class="right flex_center">
								<view class="text flex_center">
									<u-icon name="arrow-right" bold size="28rpx" color="#999"></u-icon>
									<view>{{ info.appoint_sort }}</view>
								</view>
							</view>
						</view>
					</view>

					<view class="content">
						<view class="tags">
							<view class="tags_title flex_r_between">
								<view class="block flex_center">
									添加二级导航(最多可添加5个)
								</view>

								<view class="length">
									{{ appoint_sub_tab_list.length }}/5
								</view>
							</view>
							<scroll-view scroll-x="true">
								<view class="tags_list flex_center">
									<view class="nothing flex_r_around" v-if="!appoint_sub_tab_list.length">
										<view class="flex_center">
											<u-icon name="tags" size="32rpx" color="#FD2A53"></u-icon>
											<text>暂无二级导航</text>
										</view>
									</view>
									<view class="tags_item flex_r_around" v-for="(item,index) in appoint_sub_tab_list"
										:key="index">
										<text>{{ item.name }}</text>
										<view class="tags_list_icon" @click="onDeteleNav(index , 2)">
											<u-icon name="close-circle-fill" color="#FD2A53" size="32rpx"></u-icon>
										</view>
									</view>
								</view>
							</scroll-view>

							<view class="tags_input flex_center" @click="show_tags_appoint = true">
								<view class="placeholder">{{ appoint_sub_tab_list.length > 0 ? '继续添加' : '请输入' }}</view>
								<!-- <text>/6</text> -->
							</view>

						</view>
					</view>

				</u-collapse-item>
			</u-collapse>
		</view>

		<view class="lock">
			<view class="title flex_r_between" @click="openLock">
				<text>会员</text>
				<image :src="`/static/public/select_circle${info.vip_open == 1 ? '_s' : ''}.png`"></image>
			</view>
			<view class="p24" v-if="info.vip_open == 1">
				<view class="content">
					<view class="lock_title flex_r_between">
						<text>会员价格及时间设置</text>
						<text></text>
					</view>
					<view class="list flex_r_between">
						<view class="label">1个月</view>
						<view class="input flex_center">
							<input type="numeric" placeholder="请输入金额" placeholder-class="input-placeholder"
								v-model="info.vip_month_price" @input="handleInput1" />
							<text>元</text>
						</view>
					</view>
					<view class="list flex_r_between">
						<view class="label">6个月</view>
						<view class="input flex_center">
							<input type="number" placeholder="请输入金额" placeholder-class="input-placeholder"
								v-model="info.vip_season_price" @input="handleInput2" />
							<text>元</text>
						</view>
					</view>
					<view class="list flex_r_between">
						<view class="label">12个月</view>
						<view class="input flex_center">
							<input type="number" placeholder="请输入金额" placeholder-class="input-placeholder"
								v-model="info.vip_year_price" @input="handleInput3" />
							<text>元</text>
						</view>
					</view>
					<view class="list flex_r_between">
						<view class="label">永久</view>
						<view class="input flex_center">
							<input type="number" placeholder="请输入金额" placeholder-class="input-placeholder"
								v-model="info.vip_forever_price" @input="handleInput4" />
							<text>元</text>
						</view>
					</view>
				</view>

				<view class="content">
					<view class="lock_title flex_r_between" @click="onType(1)">
						<text>邀请用户送会员</text>
						<image :src="`/static/public/select_circle${lock_invite ? '_s' : ''}.png`"></image>
					</view>

					<view class="box" v-if="lock_invite">
						<view class="input_text flex_r_between">
							<view class="item flex_r_between">
								<text>邀请</text>
								<input type="number" placeholder="请输入" placeholder-class="input-placeholder"
									v-model="info.share_people_num" />
								<text>人</text>
							</view>
							<view class="item flex_r_between">
								<text>解锁</text>
								<input type="number" placeholder="请输入" placeholder-class="input-placeholder"
									v-model="info.open_month_num" />
								<text>月会员</text>
							</view>
						</view>

						<view class="input_text flex_r_between">
							<view class="item flex_r_between">
								<text>邀请</text>
								<input type="number" placeholder="请输入" placeholder-class="input-placeholder"
									v-model="info.share_num_open_long_vip" />
								<text>人</text>
							</view>
							<view class="item flex_r_between">
								<text></text>
								<text>永久解锁会员</text>
							</view>
						</view>
					</view>
				</view>

				<view class="content">
					<view class="lock_title flex_r_between" @click="onType(1)">
						<text>会员权益</text>
						<text></text>
					</view>

					<view class="lock_select_box">
						<u-grid :border="false" :col="3">
							<u-grid-item v-for="(item,index) in vip_rich_list" :key="index"
								@click="onVipRichChoose(index)">
								<view class="item flex_center">
									<text>{{
										item == 1 ? '解锁聊天' 
										: item == 2 ? '解锁评论'
										: item == 3 ? '专属客服'
										: item == 4 ? 'VIP标识'
										: item == 5 ? '查看成员'
										: ''
									}}</text>
									<image
										:src="`/static/public/select_circle${info.member_equity.indexOf(item) > -1 ? '_s' : ''}.png`">
									</image>
								</view>
							</u-grid-item>

						</u-grid>
					</view>
				</view>

			</view>
		</view>

		<u-popup :show="show_modal" mode="center" @close="show_modal = false" bgColor="transparent">
			<view class="modal2 flex_c">
				<view class="title">圈子功能</view>
				<view class="text">根据需求选择功能，创建成功后点击圈子管理，可修改功能名称及权限设置</view>
				<view class="modal_btn flex_r_between">
					<view class="item submit flex_r_around" @click="show_modal = false">
						<text>确定</text>
					</view>
				</view>
			</view>
		</u-popup>

		<!-- 排序 -->
		<uni-popup ref="popup" type="center" @change="onPopupChange">
			<view class="sort flex_c">

				<view class="sort_title">导航排序</view>

				<view class="sort_image">
					<image :src="$util.prefix('circle/sort_image.png')" mode="widthFix"></image>
				</view>

				<basic-drag v-model="draw_list" itemKey="text" :column="3" itemHeight="36px" :width="`${drop_width}`">
					<template #item="{element}">
						<view class="drag-item-box">
							<view class="drag-item flex_r_around">
								<text>{{ element.sort }}.{{ element.text }}</text>
							</view>
						</view>
					</template>
				</basic-drag>
			</view>
		</uni-popup>

		<u-action-sheet :actions="share_people_list" title="" :show="show_share_people"
			@close="show_share_people = false" @select="onSharePeople" cancelText="取消">
		</u-action-sheet>

		<!-- 活动二级导航添加 -->
		<u-popup :show="show_tags_active" @close="show_tags_active = false" mode="center" round="40rpx">
			<view class="modal_tags">
				<view class="modal_title flex_r_between">
					<text>标签</text>
					<u-icon name="close-circle" color="#CCCCCC" size="48rpx" @click="show_tags_active = false"></u-icon>
				</view>

				<view class="modal_textarea">
					<textarea placeholder="请输入" placeholder-class="input-placeholder" v-model="tags_input_active"
						maxlength="6"></textarea>
				</view>

				<view class="modal_btn flex_r_around" @click="onEenterTag(1)">
					<text>确定</text>
				</view>

			</view>
		</u-popup>

		<!-- 预约二级导航添加 -->
		<u-popup :show="show_tags_appoint" @close="show_tags_appoint = false" mode="center" round="40rpx">
			<view class="modal_tags">
				<view class="modal_title flex_r_between">
					<text>标签</text>
					<u-icon name="close-circle" color="#CCCCCC" size="48rpx"
						@click="show_tags_appoint = false"></u-icon>
				</view>

				<view class="modal_textarea">
					<textarea placeholder="请输入" placeholder-class="input-placeholder" v-model="tags_input_appoint"
						maxlength="6"></textarea>
				</view>

				<view class="modal_btn flex_r_around" @click="onEenterTag(2)">
					<text>确定</text>
				</view>

			</view>
		</u-popup>

		<!-- 商品二级导航添加 -->
		<u-popup :show="show_tags_goods" @close="show_tags_goods = false" mode="center" round="40rpx">
			<view class="modal_tags">
				<view class="modal_title flex_r_between">
					<text>标签</text>
					<u-icon name="close-circle" color="#CCCCCC" size="48rpx" @click="show_tags_goods = false"></u-icon>
				</view>

				<view class="modal_textarea">
					<textarea placeholder="请输入" placeholder-class="input-placeholder" v-model="tags_input_goods"
						maxlength="6"></textarea>
				</view>

				<view class="modal_btn flex_r_around" @click="onEenterTag(3)">
					<text>确定</text>
				</view>

			</view>
		</u-popup>

		<!-- 名片二级导航添加 -->
		<u-popup :show="show_tags_card" @close="show_tags_card = false" mode="center" round="40rpx">
			<view class="modal_tags">
				<view class="modal_title flex_r_between">
					<text>标签</text>
					<u-icon name="close-circle" color="#CCCCCC" size="48rpx" @click="show_tags_card = false"></u-icon>
				</view>
		
				<view class="modal_textarea">
					<textarea placeholder="请输入" placeholder-class="input-placeholder" v-model="tags_input_card"
						maxlength="6"></textarea>
				</view>
		
				<view class="modal_btn flex_r_around" @click="onEenterTag(4)">
					<text>确定</text>
				</view>
		
			</view>
		</u-popup>

		<!-- 商家二级导航添加 -->
		<u-popup :show="show_tags_store" @close="show_tags_store = false" mode="center" round="40rpx">
			<view class="modal_tags">
				<view class="modal_title flex_r_between">
					<text>标签</text>
					<u-icon name="close-circle" color="#CCCCCC" size="48rpx" @click="show_tags_store = false"></u-icon>
				</view>
		
				<view class="modal_textarea">
					<textarea placeholder="请输入" placeholder-class="input-placeholder" v-model="tags_input_store"
						maxlength="6"></textarea>
				</view>
		
				<view class="modal_btn flex_r_around" @click="onEenterTag(5)">
					<text>确定</text>
				</view>
		
			</view>
		</u-popup>

	</view>
</template>

<script>
	import BasicDrag from '@/components/basic-drag/index.vue';
	export default {
		components: {
			BasicDrag
		},
		data() {
			return {
				drop_width: 0,


				show_sort: false,

				info: {
					// 圈子ID
					circle_id: 0,
					// 是否开放商品：0=否，1=开放
					goods_open: 0,
					// 是否开放活动：0=否，1=开放
					active_open: 0,
					// 是否开放动态：0=否，1=开放
					article_open: 0,
					// 群组是否开放：0=否，1=开放
					group_open: 0,
					// 卡片是否开放：0=否，1=开放
					card_open: 0,
					// 直播是否开放：0=否，1=开放
					live_open: 0,
					// 商家是否开放：0=否，1=开放
					store_open: 0,

					// 权限版本——————————
					// 动态发布权限：1=免费发布，2=仅自己(老板)，3=会员发布，4=付费发布
					article_pub: 1,
					// 动态发布收费金额
					article_pub_price: '',

					// 活动发布权限：1=免费发布，3=会员发布，4=付费发布
					active_pub: 1,
					// 活动发布收费金额
					active_pub_price: '',

					// 卡片发布权限：1=免费发布，3=会员发布，4=付费发布
					card_pub: 1,
					// 卡片发布收费金额
					card_pub_price: '',

					// 卡片发布权限：1=免费发布，3=会员发布，4=付费发布
					member_open: 1,

					// 开播发布权限：1=所有人，2=仅自己发布，3=会员开播，5=指定人播
					live_pub: 1,
					// 公会直播礼物抽成
					live_gift_commission: '',
					// 个播抽成比例
					user_live_commission: '',

					// 邀请几人开通多长时间VIP-邀请人数
					share_people_num: '',
					// 邀请几人开通多长时间VIP-开通时长（月）
					open_month_num: '',
					// 邀请几人开通永久VIP
					share_num_open_long_vip: '',

					// vip 是否解锁
					vip_open: 0,
					// 月会员价格
					vip_month_price: '',
					// 季会员价格
					vip_season_price: '',
					// vip年价格
					vip_year_price: '',
					// vip永久价格
					vip_forever_price: '',

					// 加入类型：1=免费加入，2=仅申请加入，3=收费加入，4=仅邀请加入, 5=活动(邀请加入免入圈费)
					join_type: 1,
					// 活动邀请多少人
					join_need_people: '',
					// 付费加入所需金额
					join_need_mony: '',

					// 活动(邀请加入免入圈费)
					// 商品功能项名称
					goods_tab_name: '商品',
					// 活动功能项名称
					active_tab_name: '活动',
					// 动态功能项名称
					article_tab_name: '动态',
					// 群聊功能项名称
					group_tab_name: '群聊',
					// 卡片功能项名称
					card_tab_name: '卡片',
					// 直播功能项名称
					live_tab_name: '直播',
					// 成员功能名称
					member_tab_name: '成员',
					// 商家
					store_tab_name: '商家',
					// 动态 是否开通付费观看权限 0=否，1=开通
					article_watch_pay_open: 0,
					// 动态付费观看抽成
					article_watch_commission: '',
					// 活动报名抽成
					active_apply_commission: '',
					// 成员列表样式：1=单列，2=双列
					// card_list_style: 2,
					live_pub_uids: [],

					// 预约是否开放：0=否，1=开放
					appoint_open: 0,
					// 预约功能名称
					appoint_tab_name: 0,


					// 功能排序
					article_sort: 1,
					active_sort: 2,
					group_sort: 3,
					goods_sort: 4,
					live_sort: 5,
					member_sort: 6,
					card_sort: 7,
					appoint_sort: 8,
					store_sort: 9,

					member_equity: [],

					// 预约电商权限  1=所有人，2=指定人
					goods_service_type: 1,
				},

				// 直播指定人
				liveMemberList: [],
				// 直播指定人
				storeMemberList: [],

				open_lock: false,
				lock_invite: false,
				lock_vip: true,

				show_modal: false,

				invite_active: false,


				show_share_people: false,
				share_people_list: [{
						name: '邀请1人免费加入',
						num: 1,
					},
					{
						name: '邀请2人免费加入',
						num: 2,
					},
					{
						name: '邀请3人免费加入',
						num: 3,
					},
					{
						name: '邀请4人免费加入',
						num: 4,
					},
				],


				draw_list: [

				],

				set_sort_list: [],

				// 格式
				// tab_type 功能类型
				// name 导航名称
				// nav_id
				// 活动二级导航
				active_sub_tab_list: [],
				show_tags_active: false,
				tags_input_active: '',

				// 预约二级导航
				appoint_sub_tab_list: [],
				show_tags_appoint: false,
				tags_input_appoint: '',
				// 商品二级导航
				goods_sub_tab_list: [],
				show_tags_goods: false,
				tags_input_goods: '',
				// 名片二级导航
				card_sub_tab_list: [],
				show_tags_card: false,
				tags_input_card: '',
				// 商家二级导航
				store_sub_tab_list: [],
				show_tags_store: false,
				tags_input_store: '',

				vip_rich_list: [
					'1',
					'2',
					'3',
					'4',
					'5',
				],

			}
		},
		methods: {

			handleInput1(event) {
				// 只允许输入数字，并且在非空时确保其为整数
				this.info.vip_month_price = event.detail.value.replace(/\D/g, '').replace(/^0+/, ''); // 去除非数字和前导零
			},

			handleInput2(event) {
				// 只允许输入数字，并且在非空时确保其为整数
				this.info.vip_season_price = event.target.value.replace(/\D/g, '').replace(/^0+/, ''); // 去除非数字和前导零
			},

			handleInput3(event) {
				// 只允许输入数字，并且在非空时确保其为整数
				this.info.vip_year_price = event.target.value.replace(/\D/g, '').replace(/^0+/, ''); // 去除非数字和前导零
			},

			handleInput4(event) {
				// 只允许输入数字，并且在非空时确保其为整数
				this.info.vip_forever_price = event.target.value.replace(/\D/g, '').replace(/^0+/, ''); // 去除非数字和前导零
			},

			openLock() {
				this.info.vip_open = this.info.vip_open == 1 ? 0 : 1;
				if (this.info.vip_open == 0) {
					this.info.share_people_num = '';
					this.info.open_month_num = '';
					this.info.share_num_open_long_vip = '';
					this.info.vip_month_price = '';
					this.info.vip_season_price = '';
					this.info.vip_year_price = '';
					this.info.vip_forever_price = '';
					this.lock_invite = false;
				}
			},

			onType(type) {
				if (type == 1) {
					this.lock_invite = !this.lock_invite;
					if (!this.lock_invite) {
						this.info.share_people_num = '';
						this.info.open_month_num = '';
						this.info.share_num_open_long_vip = '';
					}
				} else {
					this.lock_vip = !this.lock_vip;
					if (!this.lock_vip) {
						this.info.vip_month_price = '';
						this.info.vip_season_price = '';
						this.info.vip_year_price = '';
						this.info.vip_forever_price = '';
					}
				}
			},

			getCircleManageInfo() {
				this.$get('/circle.circle/getCircleManageInfo', {
					circle_id: this.info.circle_id
				}).then(res => {
					this.info = res.data;
					this.info.circle_id = res.data.id;
					this.info.vip_open = Number(this.info.vip_open);
					this.liveMemberList = res.data.liveMemberList;
					this.storeMemberList = res.data.goods_service_list;
					this.active_sub_tab_list = res.data.active_sub_tab_list;
					this.appoint_sub_tab_list = res.data.appoint_sub_tab_list;
					this.goods_sub_tab_list = res.data.goods_sub_tab_list;
					this.card_sub_tab_list = res.data.card_sub_tab_list;
					this.store_sub_tab_list = res.data.store_sub_tab_list;

					if (res.data.member_equity) {
						this.info.member_equity = res.data.member_equity.split(',');
					} else {
						this.info.member_equity = [];
					}

					delete this.info.equity;
					delete this.info.active_sub_tab_list;
					delete this.info.appoint_sub_tab_list;
					delete this.info.goods_sub_tab_list;
					delete this.info.card_sub_tab_list;
					delete this.info.store_sub_tab_list;
					delete this.info.auth_type;
					if (this.info.vip_month_price == 0) {
						this.info.vip_month_price = '';
					} else {
						this.info.vip_month_price = Number(this.info.vip_month_price).toFixed(0);
					}

					if (this.info.vip_season_price == 0) {
						this.info.vip_season_price = '';
					} else {
						this.info.vip_season_price = Number(this.info.vip_season_price).toFixed(0);
					}

					if (this.info.vip_year_price == 0) {
						this.info.vip_year_price = '';
					} else {
						this.info.vip_year_price = Number(this.info.vip_year_price).toFixed(0);
					}

					if (this.info.vip_month_price != 0 || this.info.vip_season_price != 0 || this.info
						.vip_year_price != 0) {
						this.info.vip_open = 1;
					}

					if (this.info.vip_forever_price == 0) {
						this.info.vip_forever_price = '';
					} else {
						this.info.vip_forever_price = Number(this.info.vip_forever_price).toFixed(0);
					}

					if (this.info.join_need_mony == 0) {
						this.info.join_need_mony = '';
					} else {
						this.info.join_need_mony = Number(this.info.join_need_mony);
					}

					if (this.info.article_pub_price == 0) {
						this.info.article_pub_price = '';
					} else {
						this.info.article_pub_price = Number(this.info.article_pub_price).toFixed(0);
					}

					if (this.info.active_pub_price == 0) {
						this.info.active_pub_price = '';
					} else {
						this.info.active_pub_price = Number(this.info.active_pub_price).toFixed(0);
					}

					if (this.info.card_pub_price == 0) {
						this.info.card_pub_price = '';
					} else {
						this.info.card_pub_price = Number(this.info.card_pub_price).toFixed(0);
					}

					if (this.info.join_need_people == 0) {
						this.info.join_need_people = '';
					} else {
						this.info.join_need_people = Number(this.info.join_need_people).toFixed(0);
						this.invite_active = true;
					}

					if (this.info.share_people_num == 0) {
						this.info.share_people_num = '';
					} else {
						this.info.share_people_num = Number(this.info.share_people_num).toFixed(0);
					}

					if (this.info.open_month_num == 0) {
						this.info.open_month_num = '';
					} else {
						this.info.open_month_num = Number(this.info.open_month_num).toFixed(0);
					}

					if (this.info.share_num_open_long_vip == 0) {
						this.info.share_num_open_long_vip = '';
					} else {
						this.info.share_num_open_long_vip = Number(this.info.share_num_open_long_vip).toFixed(0);
					}

					// lock_invite
					if (this.info.share_people_num != 0 || this.info.open_month_num != 0 || this.info
						.share_num_open_long_vip != 0) {
						this.lock_invite = true;
					}

					// 添加导航栏排序数据
					// 动态
					if (this.info.article_open == 1) {
						this.draw_list.push({
							text: this.info.article_tab_name,
							type: 'article',
							sort: this.info.article_sort
						})
					}
					// 活动
					if (this.info.active_open == 1) {
						this.draw_list.push({
							text: this.info.active_tab_name,
							type: 'active',
							sort: this.info.active_sort
						})
					}
					// 群聊
					if (this.info.group_open == 1) {
						this.draw_list.push({
							text: this.info.group_tab_name,
							type: 'group',
							sort: this.info.group_sort
						})
					}
					// 电商
					if (this.info.goods_open == 1) {
						this.draw_list.push({
							text: this.info.goods_tab_name,
							type: 'goods',
							sort: this.info.goods_sort
						})
					}
					// 直播
					if (this.info.live_open == 1) {
						this.draw_list.push({
							text: this.info.live_tab_name,
							type: 'live',
							sort: this.info.live_sort
						})
					}
					// 成员
					if (this.info.member_open == 1) {
						this.draw_list.push({
							text: this.info.member_tab_name,
							type: 'member',
							sort: this.info.member_sort
						})
					}
					// 名片
					if (this.info.card_open == 1) {
						this.draw_list.push({
							text: this.info.card_tab_name,
							type: 'card',
							sort: this.info.card_sort
						})
					}
					// 预约
					if (this.info.appoint_open == 1) {
						this.draw_list.push({
							text: this.info.appoint_tab_name,
							type: 'appoint',
							sort: this.info.appoint_sort
						})
					}
					
					if (this.info.store_open == 1) {
						this.draw_list.push({
							text: this.info.store_tab_name,
							type: 'store',
							sort: this.info.store_sort
						})
					}

					this.draw_list = this.setListBySort(this.draw_list)
				})
			},

			onsubmit() {

				if (this.info.live_pub == 5 && this.info.live_open == 1) {
					if (!this.liveMemberList.length) {
						return this.$util.msg('请选择指定直播人');
					}
				}

				if (this.info.goods_service_type == 2 && this.info.goods_open == 1) {
					if (!this.storeMemberList.length) {
						return this.$util.msg('请选择指定电商权限');
					}
				}

				// goods_service_uids 预约电商成员uids

				if (this.info.article_pub == 4 && !this.info.article_pub_price) {
					return this.$util.msg('请填写发布动态价格');
				}

				if (this.info.active_pub == 4 && !this.info.active_pub_price) {
					return this.$util.msg('请填写发布活动价格');
				}

				// if (this.info.card_pub == 4 && !this.info.card_pub_price) {
				// 	return this.$util.msg('请填写发布名片价格');
				// }

				if (this.info.join_type == 3) {
					if (!this.info.join_need_mony || Number(this.info.join_need_mony) == 0) {
						return this.$util.msg('请填写入圈金额');
					}
				}

				if (this.info.vip_open) {
					if (!this.info.member_equity.length) {
						return this.$util.msg('请填写会员权益');
					}

					if (!this.info.vip_month_price || Number(this.info.vip_month_price) == 0) {
						return this.$util.msg('请填写月会员价格');
					}
					if (!this.info.vip_season_price || Number(this.info.vip_season_price) == 0) {
						return this.$util.msg('请填写6个月会员价格');
					}
					if (!this.info.vip_year_price || Number(this.info.vip_year_price) == 0) {
						return this.$util.msg('请填写年会员价格');
					}
					if (!this.info.vip_forever_price || Number(this.info.vip_forever_price) == 0) {
						return this.$util.msg('请填写永久价格');
					}
				}

				if (this.lock_invite) {
					if (!this.info.share_people_num || !this.info.open_month_num) {
						return this.$util.msg('请填写邀请人数或解锁会员时长');
					}

					if (!this.info.share_num_open_long_vip) {
						return this.$util.msg('请填写开通永久VIP需邀请人数');
					}
				}

				if (this.invite_active && this.info.join_type == 3 && !this.info.join_need_people) {
					return this.$util.msg('请填写活动(邀请加入免入圈费)需邀请人数');
				}

				if (!this.info.join_need_people) {
					this.info.join_need_people = 0;
				}
				if (!this.info.join_need_mony) {
					this.info.join_need_mony = 0;
				}


				if (!this.lock_invite) {
					this.info.share_people_num = '';
					this.info.open_month_num = '';
				}

				if (this.info.article_watch_pay_open == 1) {
					if (Number(this.info.article_watch_commission) > 80) {
						if (this.info.article_pub != 2) {
							return this.$util.msg('抽成比例不可超过80%');
						}
					}
				}

				// goods_tab_name: '',
				// active_tab_name: '',
				// article_tab_name: '',
				// group_tab_name: '',
				// card_tab_name: '',
				// live_tab_name: '',
				if (this.info.active_open == 1) {
					if (!this.info.active_tab_name) {
						return this.$util.msg('请填写导航栏标题');
					}
				}

				if (this.info.goods_open == 1) {
					if (!this.info.goods_tab_name) {
						return this.$util.msg('请填写导航栏标题');
					}
				}

				if (this.info.article_open == 1) {
					if (!this.info.article_tab_name) {
						return this.$util.msg('请填写导航栏标题');
					}
				}

				if (this.info.group_open == 1) {
					if (!this.info.group_tab_name) {
						return this.$util.msg('请填写导航栏标题');
					}
				}

				if (this.info.card_open == 1) {
					if (!this.info.card_tab_name) {
						return this.$util.msg('请填写导航栏标题');
					}
				}

				if (this.info.live_open == 1) {
					if (!this.info.live_tab_name) {
						return this.$util.msg('请填写导航栏标题');
					}
				}

				if (this.info.member_open == 1) {
					if (!this.info.member_tab_name) {
						return this.$util.msg('请填写导航栏标题');
					}
				}

				if (!this.info.active_tab_name) {
					this.info.active_tab_name = 'null';
				}

				if (!this.info.goods_tab_name) {
					this.info.goods_tab_name = 'null';
				}

				if (!this.info.article_tab_name) {
					this.info.article_tab_name = 'null';
				}

				if (!this.info.group_tab_name) {
					this.info.group_tab_name = 'null';
				}

				if (!this.info.card_tab_name) {
					this.info.card_tab_name = 'null';
				}

				if (!this.info.live_tab_name) {
					this.info.live_tab_name = 'null';
				}

				// // vip 是否解锁
				// vip_open: 0,
				// // 月会员价格
				// vip_month_price: '',
				// // 季会员价格
				// vip_season_price: '',
				// // vip年价格
				// vip_year_price: '',
				// // vip永久价格
				// vip_forever_price: '',
				if (this.info.active_open == 1 && this.info.active_pub == 3) {
					if (!this.info.vip_month_price || !this.info.vip_season_price || !this.info.vip_year_price || !this
						.info.vip_forever_price) {
						return this.$util.msg('请填写VIP价格');
					}
				}

				if (this.info.card_open == 1 && this.info.card_pub == 3) {
					if (!this.info.vip_month_price || !this.info.vip_season_price || !this.info.vip_year_price || !this
						.info.vip_forever_price) {
						return this.$util.msg('请填写VIP价格');
					}
				}

				if (this.info.article_open == 1 && this.info.article_pub == 3) {
					if (!this.info.vip_month_price || !this.info.vip_season_price || !this.info.vip_year_price || !this
						.info.vip_forever_price) {
						return this.$util.msg('请填写VIP价格');
					}
				}

				if (this.info.live_open == 1 && this.info.live_pub == 3) {
					if (!this.info.vip_month_price || !this.info.vip_season_price || !this.info.vip_year_price || !this
						.info.vip_forever_price) {
						return this.$util.msg('请填写VIP价格');
					}
				}

				// 1=所有人，2=仅自己发布，3=会员开播，5=指定人播
				if (this.info.active_open == 1 && !this.info.active_apply_commission) {
					if (this.info.active_pub != 2) {
						return this.$util.msg('请填写付费活动抽成比例');
					}
				}

				if (this.info.active_open == 1 && Number(this.info.active_apply_commission) > 80) {
					if (this.info.active_pub != 2) {
						return this.$util.msg('付费活动抽成比例最大为80%');
					}
				}
				

				// if (this.info.live_open == 1 && (Number(this.info.live_gift_commission || 0) > 80 || Number(this.info
				// 		.user_live_commission || 0) > 80)) {
				// 	if (this.info.live_pub != 2) {
				// 		return this.$util.msg('礼物抽成比例最大为80%');
				// 	}
				// }

				if (this.invite_active) {
					if (this.info.join_need_people == '0') {
						return this.$util.msg('请填写正确的邀请人数');
					}
				}

				var live_pub_uids = [];
				this.liveMemberList.forEach(element => {
					live_pub_uids.push(element.user_id);
				});
				

				var goods_service_uids = [];
				this.storeMemberList.forEach(element => {
					goods_service_uids.push(element.user_id);
				});
				this.info.live_pub_uids = live_pub_uids.join(',');
				this.info.goods_service_uids = goods_service_uids.join(',');
				this.info.member_equity = this.info.member_equity.join(',');
				
				
				this.$post('/circle.circle/submitCircleManage', this.info, true, (res) => {
					this.info.member_equity = this.info.member_equity.split(',')
				}).then(res => {
					this.info.member_equity = this.info.member_equity.split(',')
					this.$util.msg(res.msg);
					this.$native.upgradeCircleSuccess(`${this.info.circle_id}`);
				})

			},

			onInviteActive() {
				if (this.invite_active) {
					this.info.join_need_people = '';
					this.invite_active = false;
					if (this.info.join_type == 5) {
						this.info.join_type = 1;
					}
				} else {
					// 加入类型：1=免费加入，2=仅申请加入，3=收费加入，4=仅邀请加入, 5=活动(邀请加入免入圈费)
					this.invite_active = true;
					if (this.info.join_type == 1) {
						this.info.join_type = 5;
					} else {
						this.info.join_type = 3;
					}
				}
			},

			onJoinFree() {
				this.info.join_type = 1;
				if (this.invite_active) {
					this.invite_active = false;
					this.info.join_need_people = '';
				}
			},

			onJoinPay() {
				if (this.info.join_type == 3) {
					if (!this.invite_active) {
						this.info.join_type = 1;
					} else {
						this.info.join_type = 5;
					}
				} else {
					this.info.join_type = 3;
				}
			},

			onArticleWatchPayOpen() {
				if (this.info.article_watch_pay_open == 0) {
					this.info.article_watch_pay_open = 1;
				} else {
					this.info.article_watch_pay_open = 0;
				}
			},

			showTil() {
				this.$refs.til.flag = !this.$refs.til.flag;
			},

			onSharePeople(e) {
				this.info.join_need_people = e.num;
			},

			// 指定人直播选择
			toChooseLiveMember() {
				this.$util.toUrl(`/pages/circle/liveMemberList?circle_id=${this.info.circle_id}`);
			},

			// 指定人直播选择
			toChooseStoreMember() {
				this.$util.toUrl(`/pages/circle/storeMemberList?circle_id=${this.info.circle_id}`);
			},

			// 排序
			onShowSort() {
				this.draw_list = this.setListBySort(this.draw_list);
				this.$refs.popup.open();
			},

			// 根据 sort 重排数组
			setListBySort(arr) {
				var list = arr.sort(function(a, b) {
					return a.sort - b.sort
				});
				return list;
			},

			// 排序更改
			sortChange(e) {
				for (var index = 0; index < e.length; index++) {
					e[index].sort = index + 1;
				}
				return e;
			},

			onPopupChange(e) {
				if (!e.show) {
					setTimeout(() => {
						this.draw_list = this.sortChange(this.draw_list);
						this.draw_list.forEach(element => {
							// 动态
							if (element.type == 'article') {
								this.info.article_sort = element.sort;
							}

							// 活动
							if (element.type == 'active') {
								this.info.active_sort = element.sort;
							}

							// 群组
							if (element.type == 'group') {
								this.info.group_sort = element.sort;
							}

							// 电商
							if (element.type == 'goods') {
								this.info.goods_sort = element.sort;
							}

							// 直播
							if (element.type == 'live') {
								this.info.live_sort = element.sort;
							}

							// 成员
							if (element.type == 'member') {
								this.info.member_sort = element.sort;
							}

							// 名片
							if (element.type == 'card') {
								this.info.card_sort = element.sort;
							}

							// 预约
							if (element.type == 'appoint') {
								this.info.appoint_sort = element.sort;
							}
							
							// 预约
							if (element.type == 'store') {
								this.info.store_sort = element.sort;
							}

						});
					}, 600)
				}
			},

			onCloseSort() {
				this.show_sort = false;
				if (this.set_sort_list.length) {
					this.draw_list = this.set_sort_list;
					this.draw_list.forEach(element => {
						// 动态
						if (element.type == 'article') {
							this.info.article_sort = element.sort;
						}

						// 活动
						if (element.type == 'active') {
							this.info.active_sort = element.sort;
						}

						// 群组
						if (element.type == 'group') {
							this.info.group_sort = element.sort;
						}

						// 电商
						if (element.type == 'goods') {
							this.info.goods_sort = element.sort;
						}

						// 直播
						if (element.type == 'live') {
							this.info.live_sort = element.sort;
						}

						// 成员
						if (element.type == 'member') {
							this.info.member_sort = element.sort;
						}

						// 名片
						if (element.type == 'card') {
							this.info.card_sort = element.sort;
						}

						// 预约
						if (element.type == 'appoint') {
							this.info.appoint_sort = element.sort;
						}

					});
				}
			},

			// 删除二级导航
			onDeteleNav(index, type) {
				// 1=动态、2=活动，3=群聊，4=视频，5=商城，6=语音直播，7=成员，8=名片，9=预约
				// 活动
				if (type == 1) {
					this.$post('/circle.circle/submitCircleNav', {
						circle_id: this.info.circle_id,
						tab_type: 2,
						name: this.active_sub_tab_list[index].name,
						act: 3,
						nav_id: this.active_sub_tab_list[index].id
					}).then(res => {
						this.active_sub_tab_list.splice(index, 1)
					})
				}

				// 预约
				if (type == 2) {
					this.$post('/circle.circle/submitCircleNav', {
						circle_id: this.info.circle_id,
						tab_type: 9,
						name: this.appoint_sub_tab_list[index].name,
						act: 3,
						nav_id: this.appoint_sub_tab_list[index].id
					}).then(res => {
						this.appoint_sub_tab_list.splice(index, 1)
					})
				}

				// 商城
				if (type == 3) {
					this.$post('/circle.circle/submitCircleNav', {
						circle_id: this.info.circle_id,
						tab_type: 5,
						name: this.goods_sub_tab_list[index].name,
						act: 3,
						nav_id: this.goods_sub_tab_list[index].id
					}).then(res => {
						this.goods_sub_tab_list.splice(index, 1)
					})
				}
			
				// 名片
				if (type == 4) {
					this.$post('/circle.circle/submitCircleNav', {
						circle_id: this.info.circle_id,
						tab_type: 8,
						name: this.card_sub_tab_list[index].name,
						act: 3,
						nav_id: this.card_sub_tab_list[index].id
					}).then(res => {
						this.card_sub_tab_list.splice(index, 1)
					})
				}
				
				// 商家
				if (type == 5) {
					this.$post('/circle.circle/submitCircleNav', {
						circle_id: this.info.circle_id,
						tab_type: 12,
						name: this.store_sub_tab_list[index].name,
						act: 3,
						nav_id: this.store_sub_tab_list[index].id
					}).then(res => {
						this.store_sub_tab_list.splice(index, 1)
					})
				}
			
			},

			onEenterTag(type) {
				if (type == 1) {
					if (!this.tags_input_active) {
						return this.$util.msg('请填写标签');
					}
					if (this.active_sub_tab_list.length < 5) {
						this.$post('/circle.circle/submitCircleNav', {
							circle_id: this.info.circle_id,
							tab_type: 2,
							name: this.tags_input_active,
							act: 1
						}).then(res => {
							this.active_sub_tab_list.push({
								tab_type: 1,
								name: this.tags_input_active,
								id: res.data.nav_id
							});
							this.tags_input_active = '';
							this.show_tags_active = false;
						})
					}
				}

				if (type == 2) {
					if (!this.tags_input_appoint) {
						return this.$util.msg('请填写标签');
					}
					if (this.appoint_sub_tab_list.length < 5) {
						this.$post('/circle.circle/submitCircleNav', {
							circle_id: this.info.circle_id,
							tab_type: 9,
							name: this.tags_input_appoint,
							act: 1
						}).then(res => {
							this.appoint_sub_tab_list.push({
								tab_type: 9,
								name: this.tags_input_appoint,
								id: res.data.nav_id
							});
							this.tags_input_appoint = '';
							this.show_tags_appoint = false;
						})
					}
				}

				if (type == 3) {
					if (!this.tags_input_goods) {
						return this.$util.msg('请填写标签');
					}
					if (this.goods_sub_tab_list.length < 5) {
						this.$post('/circle.circle/submitCircleNav', {
							circle_id: this.info.circle_id,
							tab_type: 5,
							name: this.tags_input_goods,
							act: 1
						}).then(res => {
							this.goods_sub_tab_list.push({
								tab_type: 9,
								name: this.tags_input_goods,
								id: res.data.nav_id
							});
							this.tags_input_goods = '';
							this.show_tags_goods = false;
							this.$nextTick(() => {
								this.$refs.goods.init();
							});
						})
					}
				}
			
				if (type == 4) {
					if (!this.tags_input_card) {
						return this.$util.msg('请填写标签');
					}
					if (this.card_sub_tab_list.length < 5) {
						this.$post('/circle.circle/submitCircleNav', {
							circle_id: this.info.circle_id,
							tab_type: 8,
							name: this.tags_input_card,
							act: 1
						}).then(res => {
							this.card_sub_tab_list.push({
								tab_type: 9,
								name: this.tags_input_card,
								id: res.data.nav_id
							});
							this.tags_input_card = '';
							this.show_tags_card = false;
						})
					}
				}
				
				if (type == 5) {
					if (!this.tags_input_store) {
						return this.$util.msg('请填写标签');
					}
					if (this.store_sub_tab_list.length < 5) {
						this.$post('/circle.circle/submitCircleNav', {
							circle_id: this.info.circle_id,
							tab_type: 12,
							name: this.tags_input_store,
							act: 1
						}).then(res => {
							this.store_sub_tab_list.push({
								tab_type: 9,
								name: this.tags_input_store,
								id: res.data.nav_id
							});
							this.tags_input_store = '';
							this.show_tags_store = false;
						})
					}
				}
			
			},

			onVipRichChoose(index) {
				var item = this.vip_rich_list[index];

				if (this.info.member_equity.indexOf(item) > -1) {
					this.info.member_equity.splice(this.info.member_equity.indexOf(item), 1);
				} else {
					this.info.member_equity.push(item)
				}
			},

			onGoodsServiceType(type) {
				this.info.goods_service_type = type;
			}

		},

		onLoad(option) {
			if (option.token) {
				uni.setStorageSync('token', option.token);
				uni.setStorageSync('cid', option.cid);
				uni.setStorageSync('terminal', option.terminal);
			}

			this.info.circle_id = option.circle_id || 0;

			this.getCircleManageInfo();

			const windowWidth = uni.getSystemInfoSync().windowWidth;
			var rpxcalc = (windowWidth / 750);
			this.drop_width = windowWidth - (64 + 80) * rpxcalc;
		},
	}
</script>

<style lang="less" scoped>
	.page {
		padding: 32rpx;
	}

	.nav_right_btn {
		width: 128rpx;
		height: 52rpx;
		background: #FD2A53;
		border-radius: 28rpx;

		text {
			font-weight: 500;
			font-size: 24rpx;
			color: #FFFFFF;
		}
	}

	.from_content {
		background: #FFFFFF;
		border-radius: 16rpx;
		margin-bottom: 20rpx;
		overflow: hidden;

		/deep/ .u-cell--clickable {
			background: transparent;
		}

		/deep/ .u-cell__body {
			height: 96rpx;
			padding: 0 32rpx;
		}

		/deep/ .u-collapse-item__content__text {
			padding: 0 32rpx;
		}

		/deep/ .u-cell__title-text {
			font-size: 26rpx;
			color: #131313;
			line-height: 36rpx;
		}

		.content {
			background: #F1F1F1;
			border-radius: 16rpx;
			overflow: hidden;
			padding: 0 24rpx;
			margin-bottom: 20rpx;

			.line {
				width: 590rpx;
				height: 2rpx;
				background: #CCCCCC;
			}

			.item {
				overflow: hidden;
				height: 96rpx;

				.label {
					font-size: 26rpx;
					color: #666666;
					line-height: 28rpx;
				}

				.right {
					flex: 1;

					.select_box {
						flex-direction: row-reverse;
						width: 100%;

						.select_item {
							margin-left: 12rpx;

							text {
								font-size: 26rpx;
								color: #131313;
								line-height: 28rpx;
							}

							image {
								margin-left: 12rpx;
								width: 36rpx;
								height: 36rpx;
							}
						}
					}

					input {
						flex: 1;
						text-align: right;
						font-size: 28rpx;
						color: #131313;
					}

					.input_tag {
						font-size: 26rpx;
						color: #131313;
						line-height: 28rpx;
						margin-left: 12rpx;
					}

					.select_image {
						width: 100%;
						flex-direction: row-reverse;

						image {
							width: 36rpx;
							height: 36rpx;
						}
					}

					.text {
						flex-direction: row-reverse;
						width: 100%;

						view {
							margin-left: 12rpx;
							font-size: 28rpx;
							color: #131313;
						}
					}

					.people_list {
						width: 100%;
						flex-direction: row-reverse;
						padding-right: 8rpx;

						image {
							width: 56rpx;
							height: 56rpx;
							margin-left: -8rpx;
							border-radius: 28rpx;
						}

						text {
							font-size: 26rpx;
							color: #999999 !important;
						}
					}

				}
			}

			.tags {
				margin: 20rpx 0;

				.tags_title {
					font-size: 26rpx;
					color: #666666;
				}

				.length {
					font-weight: 500;
					font-size: 26rpx;
					color: #999999;
					line-height: 36rpx;
				}

				.tags_list {
					flex-wrap: nowrap;
					height: 56rpx;
					margin: 12rpx 0 18rpx;

					.nothing {
						width: 100%;

						text {
							font-size: 26rpx;
							color: #FD2A53;
							line-height: 28rpx;
							margin-left: 8rpx;
						}
					}

					.tags_item {
						flex-shrink: 0;
						height: 56rpx;
						background: #F7F7F7;
						border-radius: 8rpx;
						padding: 0 36rpx;
						margin-right: 20rpx;
						margin: 8rpx 20rpx 8rpx 0;
						position: relative;

						text {
							font-weight: 500;
							font-size: 28rpx;
							color: #131313;
							line-height: 56rpx;
						}

						.tags_list_icon {
							position: absolute;
							right: -12rpx;
							top: -12rpx;
						}

					}
				}

				.tags_input {
					background: #F7F7F7;
					border-radius: 16rpx;
					height: 96rpx;
					padding: 0 24rpx;

					.placeholder {
						font-size: 26rpx;
						color: #666;
						flex: 1;
					}

					text {
						font-size: 26rpx;
						color: #999999;
						line-height: 36rpx;
					}
				}

			}

		}

	}

	.lock {
		margin-bottom: 20rpx;
		background: #FFFFFF;
		border-radius: 16rpx;

		.p24 {
			padding: 0 24rpx 24rpx;
		}

		.title {
			font-weight: 500;
			padding: 32rpx 24rpx;

			text {
				font-size: 28rpx;
				color: #131313;
				line-height: 40rpx;
			}

			image {
				width: 36rpx;
				height: 36rpx;
			}
		}

		.type {
			margin-top: 20rpx;

			text {
				font-weight: 500;
				font-size: 24rpx;
				color: #131313;
				line-height: 34rpx;
			}

			image {
				width: 36rpx;
				height: 36rpx;
			}
		}

		.input_text {
			height: 96rpx;
			background: #F1F1F1;
			border-radius: 16rpx;
			margin-top: 20rpx;

			.item {
				padding: 0 24rpx;

				text {
					font-size: 26rpx;
					color: #333333;
					line-height: 28rpx;
				}

				input {
					width: 112rpx;
					height: 48rpx;
					background: #FFFFFF;
					border-radius: 8rpx;
					text-align: center;
					font-size: 24rpx;
					color: #333;
					margin: 0 16rpx;
				}
			}
		}

		.content {
			background: #F1F1F1;
			border-radius: 16rpx;
			overflow: hidden;
			margin-bottom: 20rpx;

			.lock_title {
				padding: 0 24rpx;
				height: 94rpx;
				border-bottom: 2rpx solid #CCCCCC;

				text {
					font-size: 26rpx;
					color: #131313;
					line-height: 94rpx;
				}

				image {
					width: 36rpx;
					height: 36rpx;
				}
			}

			.list {
				height: 96rpx;
				padding: 0 24rpx;
				overflow: hidden;

				.label {
					font-size: 28rpx;
					color: #333333;
					line-height: 40rpx;
					margin-right: 16rpx;
				}

				.select {
					width: 36rpx;
					height: 36rpx;

					image {
						width: 36rpx;
						height: 36rpx;
					}
				}

				.input {
					flex: 1;
					overflow: hidden;

					input {
						flex: 1;
						text-align: right;
						font-size: 28rpx;
						color: #999999;
						line-height: 28rpx;
					}

					text {
						font-size: 28rpx;
						color: #131313;
						line-height: 28rpx;
						margin-left: 8rpx;
					}
				}
			}

			.lock_select_box {
				padding-bottom: 32rpx;

				/deep/ .u-grid-item--hover-class {
					opacity: 1;
				}

				.item {
					margin: 32rpx 0 0;

					text {
						font-size: 26rpx;
						color: #131313;
						line-height: 28rpx;
					}

					image {
						width: 36rpx;
						height: 36rpx;
						margin-left: 12rpx;
					}
				}
			}

		}

	}

	.btn {
		margin: 56rpx auto 0;
		width: 560rpx;
		height: 100rpx;
		background: #FD2A53;
		border-radius: 50rpx;
		border: 2rpx solid #FD2A53;
		font-weight: 500;
		font-size: 32rpx;
		color: #FFFFFF;
	}

	.sort {
		width: 640rpx;
		background: linear-gradient(180deg, #FFEAEE 0%, #FFFFFF 100%);
		border-radius: 40rpx;
		padding: 40rpx;
		overflow: hidden;

		.sort_title {
			font-family: 'gongfu';
			font-size: 40rpx;
			color: #FD2A53;
			line-height: 48rpx;
			margin-bottom: 36rpx;
		}

		.sort_image {
			width: 484rpx;
			height: 576rpx;

			image {
				width: 484rpx;
				height: 576rpx;
			}
		}

		.drag-item-box {
			width: 100%;
			height: 100%;
			padding: 8rpx;
		}

		.drag-item {
			width: 100%;
			height: 100%;
			background: #F1F1F1;
			border-radius: 8rpx;

			text {
				font-weight: 500;
				font-size: 26rpx;
				color: #131313;
				line-height: 36rpx;
			}
		}
	}

	.modal2 {
		width: 616rpx;
		background: #FFFFFF;
		border-radius: 40rpx;
		padding: 80rpx 44rpx 62rpx;

		.title {
			font-weight: 500;
			font-size: 36rpx;
			color: #131313;
			line-height: 50rpx;
			margin: 16rpx 0 8rpx;
		}

		.text {
			font-size: 28rpx;
			color: #666666;
			line-height: 40rpx;
			text-align: center;
		}

		.modal_btn {
			margin-top: 42rpx;

			.item {
				height: 88rpx;
				border-radius: 44rpx;
				width: 320rpx;

				text {
					font-size: 28rpx;
				}
			}

			.submit {
				background: #FD2A53;

				text {
					color: #FFF;
				}
			}
		}

		.icon {
			width: 100%;
			flex-direction: row-reverse;
		}
	}

	.modal_tags {
		width: 616rpx;
		background: #FFFFFF;
		border-radius: 40rpx;
		padding: 34rpx 16rpx 38rpx 32rpx;

		.modal_title {
			text {
				font-weight: 500;
				font-size: 36rpx;
				color: #131313;
				line-height: 50rpx;
			}
		}

		.modal_textarea {
			width: 552rpx;
			height: 208rpx;
			background: #F7F7F7;
			border-radius: 16rpx;
			padding: 24rpx;
			margin: 32rpx 0;
			overflow: hidden;

			textarea {
				font-size: 28rpx;
				color: #333;
				line-height: 36rpx;
			}
		}

		.modal_btn {
			width: 320rpx;
			height: 88rpx;
			background: #FD2A53;
			border-radius: 44rpx;
			margin: 0 auto;

			text {
				font-size: 28rpx;
				color: #FFFFFF;
			}
		}

	}
</style>